<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab .aui-active{
          color: #f23030;
          border-bottom: 2px solid #f23030;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #f23030;
          border: solid 1px #f23030;
        }
        /*.aui-toast{
          width: 9.5rem;
          background: #999;
          opacity: 0.7;
          height: 4rem;
          min-height: 4rem;
          line-height: 4rem;
        }*/
        .aui-toast-content{
          color: #fff;
        }
        body{
          padding-top: 2rem;
        }
        .tab_outer {
          width: 100%;
          overflow-x: scroll;
            position: fixed;
            top: 0;
            z-index: 1;
        }
        #tab {
          width: 140%;
        }
        .aui-refresh-content {
          min-height: calc(100vh - 2.4rem)
        }
        .order_footer_pay{
          display: flex;
          align-items: center;
          justify-content: space-between;

        }
        .footer_list_order{
          display: flex;
          align-items: center;
        }
        .storeOrderTost{
          width: 1rem;
          height: 1rem;
        }
      .aui-list .aui-list-item{
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
        }
        .toast_footer_btn{
          position: fixed;
          bottom: 0;
          width: 100vw;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          color: #fff;
          background:linear-gradient(to right,#FE6811,#FF0334);
          font-size: 0.8rem;
        }
      </style>
  </head>
  <body>
    <div id="app" style="box-sizing:border-box" >
      <div class="tab_outer">
        <div class="aui-tab" id="tab">
          <div class="aui-tab-item aui-active" @click="type = ''">全部</div>
          <div class="aui-tab-item" @click="type = 1">待付款</div>
          <div class="aui-tab-item" @click="type = 2">待发货</div>
          <div class="aui-tab-item" @click="type = 3">已发货</div>
          <div class="aui-tab-item" @click="type = 4">已完成</div>
          <div class="aui-tab-item" @click="type = 5">待评价</div>
          <div class="aui-tab-item" @click="type = 6">退款中</div>
        </div>
      </div>

      <div id="tab1-con">
        <ul class="aui-refresh-content">
          <li v-for="(items, index) in list" :key="index" style="margin-bottom:0.5rem;">
            <!-- 待付款 -->
            <ul class="aui-list aui-media-list" v-if="items.order_status == 1" style="margin-top:0.5rem;">

               <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
               <div class="aui-media-list-item-inner">
                   <div class="aui-list-item-media" style="width: 4rem;">
                       <img :src="item.goods_pic" class="aui-list-img-md">
                   </div>
                   <div class="aui-list-item-inner">
                       <div class="aui-list-item-text">
                         <div  class="aui-list-item-title" style="width: 70%;">
                           <div class="aui-font-size-14">{{item.type | storeType}}</div>
                           <div class="aui-list-item-text">{{item.sku_info}}</div>
                        </div>
                           <div class="aui-list-item-right" style="text-align:right;">
                             <div style="color:#999">{{item.goods_oprice}}</div>
                             <div>￥{{item.goods_price}}</div>
                             <div>×{{item.goods_nums}}</div>
                           </div>

                       </div>

                   </div>
               </div>
            </li>
            <li class="aui-list-item-middle" style="padding-right:0.75rem;">
                <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media">邮费</div>
                  <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
                </div>

                <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
                  <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
                  <div class="aui-list-item-right">总计:</div>
                  <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
                </div>
                <div class="order_footer_pay">
                  <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
                    <div class="order_footer_btn_one" @click="">联系买家</div>

                </div>
            </li>
          </ul>
          <!-- 待付款 -->
            <!-- 待发货 -->
            <ul class="aui-list aui-media-list" v-else-if="items.order_status == 2" style="margin-top:0.5rem;">

              <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
              <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" style="width: 4rem;">
                      <img :src="item.goods_pic" class="aui-list-img-md">
                  </div>
                  <div class="aui-list-item-inner">
                      <div class="aui-list-item-text">
                        <div  class="aui-list-item-title" style="width: 70%;">
                          <div class="aui-font-size-14">{{item.type | storeType}}</div>
                          <div class="aui-list-item-text">{{item.sku_info}}</div>
                       </div>
                          <div class="aui-list-item-right" style="text-align:right;">
                            <div style="color:#999">{{item.goods_oprice}}</div>
                            <div>￥{{item.goods_price}}</div>
                            <div>×{{item.goods_nums}}</div>
                          </div>

                      </div>

                  </div>
              </div>
           </li>
           <li class="aui-list-item-middle" style="padding-right:0.75rem;">
               <div class="aui-media-list-item-inner">
                 <div class="aui-list-item-media">邮费</div>
                 <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
               </div>

               <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
                 <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
                 <div class="aui-list-item-right">总计:</div>
                 <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
               </div>
               <div class="order_footer_pay">
                 <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
                 <div class="order_footer_btn_one" @click="tost_code">确认发货</div>
               </div>
           </li>
          </ul>
            <!-- 待发货 -->
              <!-- 待收货 -->
          <ul class="aui-list aui-media-list" v-else-if="items.order_status == 3" style="margin-top:0.5rem;">
            <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 4rem;">
                    <img :src="item.goods_pic" class="aui-list-img-md">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                      <div  class="aui-list-item-title" style="width: 70%;">
                        <div class="aui-font-size-14">{{item.type | storeType}}</div>
                        <div class="aui-list-item-text">{{item.sku_info}}</div>
                     </div>
                        <div class="aui-list-item-right" style="text-align:right;">
                          <div style="color:#999">{{item.goods_oprice}}</div>
                          <div>￥{{item.goods_price}}</div>
                          <div>×{{item.goods_nums}}</div>
                        </div>

                    </div>

                </div>
            </div>
         </li>
         <li class="aui-list-item-middle" style="padding-right:0.75rem;">
             <div class="aui-media-list-item-inner">
               <div class="aui-list-item-media">邮费</div>
               <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
             </div>

             <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
               <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
               <div class="aui-list-item-right">总计:</div>
               <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
             </div>
             <div class="order_footer_pay">
               <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
               <div class="footer_list_order">
                 <div class="order_footer_btn" @click="">联系买家</div>
                 <div class="order_footer_btn_one" @click="">查看物流</div>
               </div>
             </div>
         </li>
        </ul>
          <!-- 待收货 -->
            <!-- 已完成 -->
        <ul class="aui-list aui-media-list" v-else-if="items.order_status == 4 && items.evaluate_type == 1 || items.order_status == 5" style="margin-top:0.5rem;">
          <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
          <div class="aui-media-list-item-inner">
              <div class="aui-list-item-media" style="width: 4rem;">
                  <img :src="item.goods_pic" class="aui-list-img-md">
              </div>
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-text">
                    <div  class="aui-list-item-title" style="width: 70%;">
                      <div class="aui-font-size-14">{{item.type | storeType}}</div>
                      <div class="aui-list-item-text">{{item.sku_info}}</div>
                   </div>
                      <div class="aui-list-item-right" style="text-align:right;">
                        <div style="color:#999">{{item.goods_oprice}}</div>
                        <div>￥{{item.goods_price}}</div>
                        <div>×{{item.goods_nums}}</div>
                      </div>

                  </div>

              </div>
          </div>
       </li>
       <li class="aui-list-item-middle" style="padding-right:0.75rem;">
           <div class="aui-media-list-item-inner">
             <div class="aui-list-item-media">邮费</div>
             <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
           </div>

           <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
             <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
             <div class="aui-list-item-right">总计:</div>
             <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
           </div>
           <div class="order_footer_pay">
             <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
             <div class="order_footer_btn_one" @click="">联系买家</div>
           </div>
       </li>
      </ul>
      <!-- 已完成 -->
        <!-- 待评价 -->
      <ul class="aui-list aui-media-list" v-else-if="items.order_status == 4 && items.evaluate_type == 0" style="margin-top:0.5rem;">
        <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
        <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media" style="width: 4rem;">
                <img :src="item.goods_pic" class="aui-list-img-md">
            </div>
            <div class="aui-list-item-inner">
                <div class="aui-list-item-text">
                  <div  class="aui-list-item-title" style="width: 70%;">
                    <div class="aui-font-size-14">{{item.type | storeType}}</div>
                    <div class="aui-list-item-text">{{item.sku_info}}</div>
                 </div>
                    <div class="aui-list-item-right" style="text-align:right;">
                      <div style="color:#999">{{item.goods_oprice}}</div>
                      <div>￥{{item.goods_price}}</div>
                      <div>×{{item.goods_nums}}</div>
                    </div>

                </div>

            </div>
        </div>
     </li>
     <li class="aui-list-item-middle" style="padding-right:0.75rem;">
         <div class="aui-media-list-item-inner">
           <div class="aui-list-item-media">邮费</div>
           <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
         </div>

         <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
           <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
           <div class="aui-list-item-right">总计:</div>
           <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
         </div>
         <div class="order_footer_pay">
           <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
           <div class="order_footer_btn_one" @click="">联系买家</div>
         </div>
     </li>
    </ul>
      <!-- 待评价 -->
      <!-- 退款中 -->
    <ul class="aui-list aui-media-list" v-else-if="items.order_status == 6" style="margin-top:0.5rem;">
      <li class=" aui-list-item-middle" v-for="item in items.goods" style="">
      <div class="aui-media-list-item-inner">
          <div class="aui-list-item-media" style="width: 4rem;">
              <img :src="item.goods_pic" class="aui-list-img-md">
          </div>
          <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div  class="aui-list-item-title" style="width: 70%;">
                  <div class="aui-font-size-14">{{item.type | storeType}}</div>
                  <div class="aui-list-item-text">{{item.sku_info}}</div>
               </div>
                  <div class="aui-list-item-right" style="text-align:right;">
                    <div style="color:#999">{{item.goods_oprice}}</div>
                    <div>￥{{item.goods_price}}</div>
                    <div>×{{item.goods_nums}}</div>
                  </div>

              </div>

          </div>
      </div>
   </li>
   <li class="aui-list-item-middle" style="padding-right:0.75rem;">
       <div class="aui-media-list-item-inner">
         <div class="aui-list-item-media">邮费</div>
         <div class="aui-list-item-right" style="text-align:right;width: 75%;max-width:100%">￥{{items.express_fee}}</div>
       </div>

       <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
         <div class="aui-list-item-right" style="margin-right:8px;">共<span>{{items.goods_count}}</span>件商品</div>
         <div class="aui-list-item-right">总计:</div>
         <div class="aui-list-item-right" style="color:#f23030;">￥{{items.total_price}}</div>
       </div>
       <div class="order_footer_pay">
         <div class="aui-list-item-left order_wait_pay" >{{items.order_status | status}}</div>
         <div class="footer_list_order">
           <div class="order_footer_btn" @click="">联系买家</div>
           <div class="order_footer_btn_one" @click="">查看详情</div>
         </div>
       </div>
     </li>
    </ul>
    <!-- 退款中 -->
      </li>
     </ul>
    </div>
    <!-- 弹窗 -->
    <div style="position:fixed;top:0;width:100vw;height:100vh;opacity:0.6;background:#999;z-index:12;display:none" id="shopCenterbg" ></div>
      <div style="position:fixed;z-index:999;top:40vh;background:#fff;width:100vw;height:60vh;display:none" id="shopCenterTost">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-left: 41vw;margin-top:1rem;">
                <div style="">确认发货</div>
                <img src="../../image/my/m44.png" alt="" style="wdith:2rem;height:2rem">
              </div>
              <ul class="aui-list aui-form-list" style="margin-top:3rem">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width:12%" @click="hidden_tost()">
                          <img src="../../image/my/wlOne.png" alt="" class="storeOrderTost">
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请输入物流单号">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label"  style="width:12%">
                          <img src="../../image/my/wlTwo.png" alt="" class="storeOrderTost">
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请选择物流公司">
                        </div>
                    </div>
                </li>
                <li class="toast_footer_btn">确认</li>
              </ul>
      </div>
   </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">
      apiready = function(){
        var toast = new auiToast({});
        var app = new Vue({
              el: '#app',
              data: {
                type: '',
                page: 1,
                totalpage: 1,
                list: [],
                reason_id: 0,
                reason_list: [],
                this_order_id: ''
              },
              methods:{
              hidden_tost:function(){
                  $api.css(shopCenterbg,'display:none');
                  $api.css(shopCenterTost,'display:none');
                },
                tost_code:function(){
                    $api.css(shopCenterbg,'display:block');
                    $api.css(shopCenterTost,'display:block');
                },
                getList: function (fn) {
                  var $_this = this
                  api.ajax({
                      url: window.Url.Freestore_storeOrder,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('token'),
                              type:  $_this.type,
                              page: $_this.page,
                          }
                      }
                  }, function(ret, err) {
                      //alert(JSON.stringify(ret));
                      if (ret) {
                        if (ret.re == 1) {
                          $_this.totalpage = ret.data.sum_page;
                          $_this.list = ret.data.list;
                        } else {
                          $_this.totalpage = 1;
                          $_this.list = [];
                          toast.success({
                            title:ret.info,
                            duration:1000
                          })
                        }
                        fn && fn()

                      } else {
                          toast.fail({
                            title:ret.info,
                            duration:1000
                          })
                      }
                  })
                },
                makeSure: function (order_no){
                  var $_this = this
                  api.openFrame({
                      name: 'pay_order',
                      url: '../three_frame/pay_order.html',
                      bounces: false,
                      pageParam:{
                        order_no: Base64.encode('UNO' + order_no + 'HACHA'),
                        under_type: 1
                      }
                  });
                },

                checkLogistics: function (id) {
                  api.openWin({
                      name: 'checkLogistics',
                      url: './headerone.html',
                      pageParam: {
                          msg:'查看物流',
                          url:'./checkLogistics.html',
                          id: id
                      }
                  });
                }

              },
              created: function() {
                var $_this = this;
                $_this.getList();
                // $_this.type = api.pageParam.type

                var scroll = new auiScroll({
                    listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance:40 //判断到达底部的距离，isToBottom为true
                },function(ret){
                    if (ret.isToBottom) {
                        $_this.page ++
                        if ($_this.page > $_this.totalpage) {
                            $_this.page = $_this.totalpage
                            return
                        }
                        api.ajax({
                            url: window.Url.Freestore_storeOrder,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    type:  $_this.type,
                                    page: $_this.page,
                                }
                            },
                            timeout: 300,
                        }, function(ret, err) {
                            if (ret) {
                                $_this.list = $_this.list.concat(ret.data.list)
                            } else {
                                api.alert({ msg: JSON.stringify(err)});
                            }
                        })
                    }

                })
              },
              mounted: function() {

                  var $_this = this
                  var type = Number($_this.type) + 1
                  var tab = new auiTab({
                      element:document.getElementById("tab"),
                      index: type,
                      repeatClick:false
                  },function(ret){
                      // console.log(ret);
                  })
                  var pullRefresh = new auiPullToRefresh({
                      container: document.querySelector('.aui-refresh-content'),
                      triggerDistance: 100
                  }, function(ret) {
                      if (ret.status == "success") {
                        $_this.getList(function () {
                          setTimeout(function() {
                              pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                          }, 500)
                        })

                      }
                  })
            },
            watch: {
              type: function () {
                var $_this = this
                $_this.getList()

              }
            },
            filters: {
              storeType:function(val){
                switch (Number(val)) {
                  case 1:
                    return '普通产品'
                    break;
                  case 2:
                    return '积分产品'
                    break;
                  case 3:
                    return '兑换币产品'
                    break;
                  case 4:
                    return '赠品产品'
                    break;
                  default:
                    break;
                }
              },
              status: function (val) {
                switch (Number(val)) {
                  case 1:
                    return '待付款'
                    break;
                  case 2:
                    return '待发货'
                    break;
                  case 3:
                    return '已发货'
                    break;
                  case 4:
                    return '已完成'
                    break;
                  case 5:
                    return '已关闭'
                    break;
                  case 6:
                    return '退款/售后中'
                    break;
                  case 8:
                    return '订单退货中'
                    break;
                  case 9:
                    return '返仓中'
                    break;
                  case 10:
                    return '已返仓'
                    break;
                  default:
                    return
                }
              }
            }
    })
  }
  </script>
  </html>
